<template>
  <div
    class="wrapper"
    @click="
      () => {
        moreShow = false;
      }
    "
    :style="{ 'margin-top': top }"
  >
    <u-navbar
      title=" "
      @rightClick="rightClick"
      @leftClick="leftClick"
      bgColor="#F6F6F6"
    >
      <view class="u-right-slot" slot="right" @click="handleDetail"
        ><view class="edit-btn" v-if="(!isGroupChat && friendId != 'undefined' && friendId || isGroupChat && conversationType != 6 && curUser && Number(curUser.userRole) !== 3) || friendInfo.isFriend == 1">{{
          $t("index.Edit")
        }}</view></view
      >
    </u-navbar>
    <image
      class="avatar-box"
      :src="friendInfo.avatarCompress || friendInfo.avatar"
      @click="showPreview(friendInfo.avatar)"
      v-if="!isGroupChat && conversationType != 6 && isPeopleAvatarExit(friendInfo.avatarCompress || friendInfo.avatar)"
      mode="aspectFill"
    ></image>
    <view class="avatar-box avator-font-setting" v-else-if="!isGroupChat && conversationType != 6" :style="{ background: `${getDefaultColor(friendInfo.avatarColorCode)}`, fontSize: '64upx' }">{{ (formatUserName(friendInfo) || commentName).slice(0, 1) }}</view>
    <view
      v-else-if="isGroupChat && conversationType != 6 && !(groupInfo.avatarCompress || groupInfo.avatar)"
      class="avatar-box"
      :style="{ background: `${groupInfo.defaultColor}` }"
      >{{ groupInfo.defaultName }}</view
    >
    <image
      class="avatar-box"
      :src="groupInfo.avatarCompress || groupInfo.avatar"
      @click="showPreview(groupInfo.avatar)"
      v-else-if="isGroupChat && conversationType != 6 && (groupInfo.avatarCompress || groupInfo.avatar)"
      mode="aspectFill"
    ></image>
		<image
		  class="avatar-box"
		  :src="require('@/static/image/chat/system.png')"
		  v-else-if="conversationType == 6"
		  mode="aspectFill"
		></image>
    <view class="nickname" v-if="!isGroupChat">{{ conversationType != 6 ? formatUserName(friendInfo) || commentName :  $t('chat.Service-Messages') }}</view>
    <view class="nickname" v-if="isGroupChat">{{ groupInfo.groupName }}</view>

    <view class="group-member" v-if="isGroupChat"
      >{{ groupList.length }} {{ $t("chat.members") }}</view
    >
    <view v-else-if="conversationType != 6 ">
      <view class="online-time">{{ getTimeDiff(friendInfo.lastLoginTime, "minutes", true, -3) }}</view>
      <!-- <view class="online-time" v-if="!friendInfo.isOnline">{{ getTimeDiff(friendInfo.lastLoginTime, "minutes", true) }}</view>
      <view class="online-status" v-else>{{ $t("chat.Online") }}</view> -->
    </view>
		<view class="group-member" v-else-if="conversationType == 6"
		  >{{ $t('chat.System-official-notification') }}</view
		>
    <!-- 以下操作 -->
    <view class="box-group" v-if="!isMe">
      <!-- 免打扰 -->
      <view class="box-item" @click="muteHandle">
        <view
          class="iconfont icon-jingyin box-icon"
          v-if="!isDonotdisturb"
        ></view>
        <view
          class="iconfont icon-quxiaojingyin box-icon"
          v-else
        ></view>
        <view class="box-text">{{ $t("chat.mute") }}</view>
      </view>
      <!-- 搜索 -->
      <!-- <view class="box-item" @click="toSearch">
        <view class="iconfont icon-sousuo1 box-icon"></view>
        <view class="box-text">{{ $t("index.Search") }}</view>
      </view> -->
      <!-- 更多。。。 -->
      <view class="box-item" @click.stop="getMore" v-if="conversationType != 6">
        <view class="iconfont icon-gengduo2 box-icon"></view>
        <view class="box-text">{{ $t("chat.more") }}</view>
        <!-- 弹出菜单 -->
        <view
          :style="{
            opacity: moreShow ? 1 : 0,
            'pointer-events': moreShow ? '' : 'none',
          }"
          class="more-popup"
          :class="{ normal: curUser && curUser.userRole == 3 }"
          v-if="isGroupChat || isblack !== ''"
        >
          <view
            class="more-menu"
            v-for="(t, i) in moreOption"
            :key="i"
            @click.stop="moreClick(t)"
          >
            <view class="icon"
              ><view :class="t.icon" :style="{ color: t.color }"></view
            ></view>
            <view class="name" :style="{ color: t.color }">{{ t.name }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 电话号码 -->
    <view
      class="cell-line"
      v-if="!isGroupChat && conversationType != 6">
      <view class="line-text">{{ $t("chat.mobile") }}</view>
      <view class="line-content" v-if="friendInfo.userPhonePrivacy == 2 || (friendInfo.userPhonePrivacy == 1 && friendInfo.userPhone)">
        <text v-if="friendInfo.userPhone">{{'+' + friendInfo.internationalAreaCode }} {{ friendInfo.userPhone || "-" }}</text>
        <text v-else>-</text>
      </view>
      <view class="line-content invisible" v-else>{{ $t("Hidden") }}</view>
    </view>
    <!-- 电子邮箱 -->
    <view
      class="cell-line"
      v-if="!isGroupChat && conversationType != 6">
      <view class="line-text">{{ $t("chat.E-mail") }}</view>
      <view class="line-content exceedToEllipsis" v-if="friendInfo.emailPrivacy == 2 || (friendInfo.emailPrivacy == 1 && friendInfo.email)">{{ friendInfo.email || "-" }}</view>
      <view class="line-content invisible" v-else>{{ $t("Hidden") }}</view>
    </view>

    <view class="box-line column" v-if="!isGroupChat && !isMe  && conversationType != 6">
      <view class="line-one" @click="toChat">{{$t("chat.Message")}}</view>
      <view class="line-one" v-if="!isFriend" @click="handleAddFriend">{{$t("chat.Add-to-Contacts")}}</view>
      <view class="line-two" v-if="isblack !== '' && isblack" @click="moreClick({type: 'removeBlockUser'})">{{ $t("chat.remove-User") }}</view>
      <view class="line-two" v-else @click="moreClick({type: 'blockUser'})">{{ $t("chat.Block-User") }}</view>
    </view>

    <!-- 添加联系人弹出层 -->
    <!-- <AddContacts :show.sync="showContacts"></AddContacts> -->
    <u-popup class="AddContacts-warpper-popup" :show="showContacts" mode="bottom" @close="closeAddContacts" @open="openAddContacts">
      <view class="AddContacts-warpper">
				<view class="AddContacts-warpper__header">
					<view class="AddContacts-warpper__header__left" @click="closeAddContacts">
						{{$t('index.Cancel')}}
					</view>
					<view class="AddContacts-warpper__header__title">
						{{$t("chat.Add-to-Contacts")}}
					</view>
					<view class="AddContacts-warpper__header__right" @click="handleAddContactDone">
						{{$t('index.Done')}}
					</view>
				</view>

        <view class="AddContacts-warpper__container">
          <view class="user-card-info">
            <image
              class="user-card-info-photo"
              :src="friendInfo.avatar"
              v-if="isPeopleAvatarExit(friendInfo.avatar)"
              mode="aspectFill"
            >
            </image>
            <view class="avatar-box avator-font-setting" :style="{ background: `${getDefaultColor(friendInfo.avatarColorCode)}`, fontSize: '64upx' }" v-else>{{ (formatUserName(friendInfo) || commentName).slice(0, 1) }}</view>
            <!-- <view
              v-else
              class="avatar-box"
              :style="{ background: `${friendInfo.defaultColor}` }"
              >{{ friendInfo.defaultName }}</view
            >             -->
            <view class="info-right">
              <input class="info-right-name" v-model="addFriendInfo.firstName" :placeholder="$t('setting.FirstName')" :placeholder-style="placeholderStyle"></input>
              <input class="info-right-lastName" v-model="addFriendInfo.lastName" :placeholder="$t('setting.LastName')"  :placeholder-style="placeholderStyle"></input>
            </view>
          </view>
          <view class="phone-line">
            <view class="line-text">{{ $t("chat.mobile") }}</view>
            <view class="line-content" v-if="friendInfo.userPhonePrivacy == 2 || (friendInfo.userPhonePrivacy == 1 && friendInfo.userPhone)">
              <text v-if="friendInfo.userPhone">{{'+' + friendInfo.internationalAreaCode }} {{ friendInfo.userPhone || "-" }}</text>
              <text v-else>-</text>
            </view>
            <view class="line-content invisible" v-else>{{ $t("Hidden") }}</view>
          </view>          
        </view>
      </view>     
    </u-popup>

    <!-- 添加新成员 -->
    <view class="box-line" v-if="isGroupChat" @click="inviteGroup">
      <view>
        <span class="iconfont icon-xinzenghaoyou line-icon"></span>
        <span class="line-three">{{ $t("chat.Add-Members") }}</span>
      </view>
    </view>
    <view class="members-box" v-if="isGroupChat">
      <view class="title">{{ $t("chat.Members") }}</view>
      <u-swipe-action>
        <u-swipe-action-item
          :disabled="getRowDisabled(t)"
          v-for="(t, index) in groupList"
          :key="t.userId"
          :options="getOption(t)"
          @click="swipeAction"
          :name="t.userId"
        >
          <view class="user-line" :style="groupList && groupList.length > 0 && index === 0 ? 'border-top: unset;' : ''" @click="toChatWithItem(t)">
            <image :src="t.userVo.avatar" class="avatar" mode="aspectFill" v-if="isPeopleAvatarExit(t.userVo.avatar)"></image>
            <view class="avatar avator-font-setting" :style="{ background: `${getDefaultColor(t.userVo.avatarColorCode)}`, fontSize: '30upx' }" v-else>{{ t.showUserName.slice(0, 1) }}</view>
            <!-- <image :src="$store.state.normalPic" class="avatar" mode="aspectFill" v-else></image> -->
            <view class="user-info">
              <view class="user-name">{{ t.showUserName
              }}</view>
              <view class="user-online-status" v-if="t.isOnline">
                <view class="dot"></view>
                online
              </view>
              <view class="user-offline-status" v-else>{{
                t.lastLoginTime || "..."
              }}</view>
            </view>
            <view class="user-type" v-if="Number(t.userRole) < 3">{{ getRoleName(t.userRole) }}</view>
          </view>
        </u-swipe-action-item>
      </u-swipe-action>
    </view>
    <!-- 解散群聊 -->
    <u-modal
      :show="confirmShow"
      :title="$t('index.operation')"
      :confirmText="$t('confirm')"
      :cancelText="$t('cancel')"
      @confirm="confirm"
      :showCancelButton="true"
      @cancel="
        () => {
          confirmShow = false;
        }
      ">
      <view class="slot-content">{{ $t("index.operation-content") }}</view>
    </u-modal>
  </div>
</template>

<script>
import {
  queryFriendsList,
  queryAddFriend,
  deleteFriend,
} from "@/services/friends";
import {
  getGroupMemberInfo,
  getRoleName,
  getGroupMemberList,
  getGroupInfo,
  getUserInfo,
  getTargetUserInfo, // 获取目标用户信息
  cleanMessage,
  addBlackUser,
  formatUserInfo,
  getTimeDiff,
	updateOlUsersInfo,
  getDefaultColor,
  updateOlUsersName
} from "@/utils/index.js";

import { mapState, mapMutations } from "vuex";
import {
  quitGroup,
  dismissGroup,
  groupGagBack,
  groupGag,
  setManage,
  removeManage,
} from "@/services/group";
import { blockUserList, unBindBlockUser } from "@/services/user";
import { muteChange, getConversationNoticeStatus } from "@/utils/RongIM";
// import AddContacts from './components/AddContacts'
export default {
  name: "ChatSettings",
  components: {
    // AddContacts
  },
  data() {
    return {
      showContacts: false, // 添加联系人弹出层的显示与隐藏
      top: "",
      userId: "",
      friendInfo: {},
      addFriendInfo: {},
      id: "",
      groupId: "", //群组Id
      // 是否为多人群聊
      isGroupChat: "",
      groupList: [],
      confirmShow: false,
      confirmType: "confirmType",
      gagLoading: false,
      moreShow: false,
      isDonotdisturb: 0, //是否消息免打扰
      friendId: "",
      commentName: "",
      isblack: "",
      isFirstLoad: true, // 是否第一次加载页面
      conversationType: "",
      placeholderStyle: "fontSize: 28rpx;	color: #A6A6A6",
    };
  },
  computed: {
    ...mapState(["friendsList", "userInfo"]),
    // 是否为好友
    isFriend() {
      // return (this.friendInfo.userVo && this.friendInfo.userVo.isFriend) || 0;
      return this.friendInfo.isFriend || 0;
    },
    // 是否点击自己的名片
    isMe() {
      console.log(this.friendInfo.userId === this.$store.state.userInfo.userId);
      return this.friendInfo.userId === this.$store.state.userInfo.userId;
    },
    //群组信息
    // currentChat() {
    //   var id = this.groupId || this.userId;
    //   console.log(id);
    //   console.log(this.$store.state.chatList);

    //   var chat = this.$store.state.chatList.find((o) => o.targetId == id);
    //   if (chat) return chat;
    //   else return {};
    // },
    //群组数据
    groupInfo() {
      if (this.groupId) return getGroupInfo(this.groupId);
      else return {};
    },
    //当前用户角色
    curUser() {
      var data = this.groupList.find(
        (o) => o.userId == this.$store.state.userInfo.userId
      );
      return data;
    },

    //more配置
    moreOption() {
      console.log(this.isblack);
      var arr;
      let isblackObj;
      // 查找是否在黑名单内
      if (this.isblack !== "") {
        if (this.isblack) {
          console.log("在黑名单内！");
          isblackObj = {
            type: "removeBlockUser",
            icon: "iconfont icon-heimingdan",
            name: this.isblack
              ? this.$t("chat.remove-User")
              : this.$t("chat.Block-User"),
            color: "#FE6600",
          };
        } else {
          console.log("不在黑名单内！");
          isblackObj = {
            type: "blockUser",
            icon: "iconfont icon-heimingdan",
            name: this.isblack
              ? this.$t("chat.remove-User")
              : this.$t("chat.Block-User"),
            color: "#FE6600",
          };
        }
      }
      //群主
      if (this.isGroupChat) {
        if (
          this.curUser &&
          (this.curUser.userRole == 1 || this.curUser.userRole == 2)
        ) {
          arr = [
            {
              type: "cleanMessages",
              icon: "iconfont icon-shanchuliaotianjilu",
              name: this.$t("chat.Clean-Messages"),
              color: "#000000",
            },
            {
              type: "deleteGroup",
              icon: "iconfont icon-shanchu1",
              name: this.$t("chat.Delete-Group"),
              color: "#FE6600",
            },
          ];
          arr.unshift(
            !this.groupInfo.groupStatus
              ? {
                  type: "silence",
                  icon: "iconfont icon-jinyan",
                  name: this.$t("contacts.silence"),
                  color: "#000000",
                }
              : {
                  type: "Unblock",
                  icon: "iconfont icon-guanbijinyan",
                  name: this.$t("contacts.cancelSilence"),
                  color: "#000000",
                }
          );
        } else {
          arr = [
            {
              type: "cleanMessages",
              icon: "iconfont icon-shanchuliaotianjilu",
              name: this.$t("chat.Clean-Messages"),
              color: "#000000",
            },
            {
              type: "leaveGroup",
              icon: "iconfont icon-tuichu",
              name: this.$t("chat.Leave-Group"),
              color: "#FE6600",
            },
          ];
        }
      } else {
        // 非群组设置弹框
        if (this.isFriend) {
          // 好友设置弹框
          arr = [
            {
              type: "Share Contact",
              icon: "iconfont icon-fenxiang",
              name: this.$t("chat.Share-Contact"),
              color: "#000000",
            },
            {
              type: "cleanMessages",
              icon: "iconfont icon-shanchuliaotianjilu",
              name: this.$t("chat.Clean-Messages"),
              color: "#000000",
            },
            // {
            //   type: "blockUser",
            //   icon: "iconfont icon-heimingdan",
            //   name: this.friendInfo.isBlockUser ? this.$t("chat.Unblock") : this.$t("chat.Block-User"),
            //   color: "#FE6600",
            // },
            isblackObj,
            {
              type: "deleteUser",
              icon: "iconfont icon-heimingdan",
              name: this.$t("chat.Delete-User"),
              color: "#FE6600",
            },
          ];
        } else {
          // 非好友设置弹框
          arr = [
            {
              type: "cleanMessages",
              icon: "iconfont icon-shanchuliaotianjilu",
              name: this.$t("chat.Clean-Messages"),
              color: "#000000",
            },
            // 分享名片
            {
              type: "Share Contact",
              icon: "iconfont icon-fenxiang",
              name: this.$t("contacts.shareContact"),
              color: "#000000",
            }
          ];
        }
      }

      return arr || [];
    },
  },
  methods: {
    ...mapMutations([
      "SET_SELECT_FRIEND_OPTION",
      "SET_SELECT_CHAT_OPTION",
      "SET_FRIEND_LIST",
    ]),
    getDefaultColor,
    getTimeDiff,
    getRoleName,
    getGroupInfo,
    addBlackUser, // 加入黑名单
    // 和群成员聊天
    toChatWithItem(obj) {
      if (this.userInfo.userId === obj.userVo.userId) {
        uni.showToast({
          title: this.$t("dating.chatYourself"),
          icon: "none",
        });
        return
      }
      uni.navigateTo({
        url: `/pages/chat/PersonalChat?targetId=${
          obj.userVo.userId
        }&commentName=${this.formatUserName(obj)}&backType=1`
      })
    },
    // 私聊聊天
    toChat() {
      uni.navigateTo({
        url: `/pages/chat/PersonalChat?targetId=${
          this.friendInfo.userId
        }&commentName=${this.formatUserName(this.friendInfo)}&backType=1`
      })
    },

    // 关闭添加联系人弹出层
    closeAddContacts() {
      this.showContacts = false
    },
    openAddContacts() {
      this.showContacts = true
    },
    // 分页获取个人黑名单列表
    async getBlackList() {
			console.log('用户信息',this.friendInfo);
			this.isblacklist()
    },
    // 判断是否在黑名单内
    async isblacklist() {
      if (!this.friendInfo.isBlockUser) {
        this.isblack = false
        if (!this.isFirstLoad) {
          uni.showToast({
            title: this.$t("index.del-success"),
            icon: "none",
            duration: 1500,
          })
        }
      } else {
        this.isblack = true
        if (!this.isFirstLoad) {
          uni.showToast({
            title: this.$t("index.add-success"),
            icon: "none",
            duration: 1500
          });
        }
      }
      uni.hideLoading()
      this.isFirstLoad = false
    },
    // 移除黑名单
    async removeBlockUser() {
      uni.showLoading()
      const resp = await unBindBlockUser(this.userId)
      if (!resp.success) return
			this.friendInfo.isBlockUser = 0
      this.getBlackList()
    },
    //预览
    showPreview(url) {
      uni.previewImage({
        urls: [url],
      });
    },
    // 跳转搜索聊天记录
    toSearch() {
      uni.navigateTo({
        url: `/pagesTool/chatRecord/ChatRecord?targetId=${
          this.isGroupChat ? this.groupId : this.userId
        }&conversationType=${this.isGroupChat ? 3 : 1}`,
      });
    },
    //免打扰点击
    async muteHandle() {
      uni.showLoading()
			let conversationType
			if(this.conversationType == 6) {
				conversationType = 6
			} else {
				conversationType = this.isGroupChat ? 3 : 1;
			}
      const options = {
        targetId: this.groupId || this.userId,
        conversationType,
        type: this.isDonotdisturb == 0 ? 1 : 0,
      };
      await muteChange(options);
      this.isDonotdisturb = this.isDonotdisturb == 0 ? 1 : 0;
      uni.hideLoading()
    },
    // 获取免打扰级别
    async messageStatus() {
			let conversationType
			if(this.conversationType == 6) {
				uni.showLoading()
				conversationType = 6
			} else {
				conversationType = this.isGroupChat ? 3 : 1;
			}
      const options = {
        conversationType,
        targetId: this.groupId || this.userId,
      };
      const { data } = await getConversationNoticeStatus(options);
			uni.hideLoading();
      console.log(data, "免打扰");
      if (data == null || data == -1) {
        this.isDonotdisturb = 0;
      } else {
        this.isDonotdisturb = data;
      }
    },
    //更多菜单点击
    async moreClick(data) {
      this.moreShow = false;
      const { type } = data;
      switch (type) {
        case "silence":
          this.toggleTaboo(type);
          break;
        case "Unblock":
          this.toggleTaboo(type);
          break;
        case "cleanMessages":
          console.log(123)
          cleanMessage({
            targetId: this.groupId || this.userId,
            conversationType: this.isGroupChat ? 3 : 1,
          });
          console.log(this.$store.state);
          let { chatList } = this.$store.state;
          if (this.isGroupChat) {
            let chat = chatList.find((o) => o.targetId == this.groupId);
            chat.latestMessage.content = "";
            this.$store.state.groupChatInfo[this.groupId] = [];
          } else {
            let chat = chatList.find((o) => o.targetId == this.userId);
            chat.latestMessage.content = "";
            this.$store.state.privateChatInfo[this.userId] = [];
          }
          break;
        case "deleteGroup":
          this.leaveGroup();
          break;
        case "leaveGroup":
          this.leaveGroup();
          break;
        case "blockUser":
          // 加入黑名单
          uni.showLoading()
          const resp = await this.addBlackUser([this.userId], this);
          if (resp) {
						this.friendInfo.isBlockUser = 1
            this.getBlackList()
						uni.hideLoading()
          } else {
            uni.hideLoading()
          }
          break;
        case "removeBlockUser":
          // 移除黑名单
          this.removeBlockUser()
          break
        case "deleteUser":
          // 删除好友
          this.deleteFriendHandle(this.userId);
          break;
        case "Share Contact":
          const info = {
            ...this.friendInfo,
            commentName: this.friendInfo.commentName,
            commentLast: this.friendInfo.commentLast
          }
          this.SET_SELECT_CHAT_OPTION({
            info: info,
            type: 1,
            isSingle: true,
            tipText: this.$t("share.selectChatTip"),
            title: this.$t("share.selectChat"),
          })
          uni.navigateTo({
            url: "/pages/selectFriend/selectChat"
          })
          break;
        default:
          break;
      }
    },
    // 获取好友信息
    async getFriendsList() {
      const resp = await queryFriendsList({
        pageNum: 1,
        pageSize: 999,
      });
      if (!resp.success) return;
      const info = resp.result.rows
      this.SET_FRIEND_LIST(info);
    },
    //删除好友
    async deleteFriendHandle(id) {
      var friend = this.$store.state.friendsList.find((o) => o.friendId == id);
      var resp = await deleteFriend(friend.id);
      if (!resp.success) return;
      //删除对话框 和 本地缓存记录
      this.$store.state.OLV1_USER[id].isFriend = 0;
      this.$store.state.OLV1_USER[id].commentLast = null
      this.$store.state.OLV1_USER[id].commentName = null
      let chatList = this.$store.state.chatList.find((o) => o.targetId == id);
      if (chatList) {
        chatList.info.commentLast = null
        chatList.info.commentName = null
      }
      // var chatList = this.$store.state.chatList.filter((o) => o.targetId != id);
      // this.$store.dispatch("changeChatList", chatList);
      if (
        this.$store.state.privateChatInfo &&
        this.$store.state.privateChatInfo[id]
      ) {
        this.$store.state.privateChatInfo[id] = [];
      }
      this.getFriendsList()
      uni.navigateBack({
        delta: 2,
      });
    },
    //获取更多操作
    getMore() {
      this.moreShow = !this.moreShow;
    },
    // 左滑点击 index 0 设置管理 1删除 name=userId
    swipeAction({ index, name }) {
      if (index == 0) {
        if (this.curUser.userRole == 2) {
          this.leaveGroup(name);
        } else {
          var user = this.groupList.find((o) => o.userId == name);
          this.setUserAdmin(user && user.userRole == 2 ? true : false, name);
        }
      } else if (index == 1) {
        this.leaveGroup(name);
      }
    },
    //设置/取消管理员
    async setUserAdmin(isAdmin, id) {
				uni.showLoading()
      if (isAdmin) {
        removeManage({ groupId: this.groupId, userIds: [id] }).then(
          async (res) => {
						uni.hideLoading()
            if (res.result.code == 200) {
							this.handleGroupInfo();
            } else {
							console.log('错误信息，',res);
              // uni.showToast({
              //   icon: "none",
              //   title: res.result.msg,
              // });
            }
           
          }
        );
      } else {
        setManage({ groupId: this.groupId, userIds: [id] }).then(
          async (res) => {
						uni.hideLoading()
            if (res.result.code == 200) {
							 this.handleGroupInfo();
            } else {
							console.log('错误信息，',res);
              // uni.showToast({
              //   icon: "none",
              //   title: res.result.msg,
              // });
            }
          }
        );
      }
    },
    getRowDisabled(data) {
      return (
        data.userId === this.$store.state.userInfo.userId ||
        Number(this.curUser.userRole) >= Number(data.userRole)
      );
    },
    //获取左滑配置
    getOption(data) {
      // 群主1，管理员2，普通成员3
      var option = [
        {
          text: "",
          style: {
            backgroundColor: "#FFFFFF",
          },
        },
      ];
      if (
        Number(this.curUser.userRole) < Number(data.userRole) &&
        data.userId !== this.$store.state.userInfo.userId
      ) {
        if (Number(this.curUser.userRole) === 1) {
          option = [
            {
              text:
                data.userRole == 2 ? this.$t('contacts.removeGroupAdmin') : this.$t('contacts.addGroupAdmin'),
              style: {
                backgroundColor: "#61BDB2",
              },
            },
            {
              text:  this.$t('contacts.delete'),
              style: {
                backgroundColor: "#FE6600",
              },
            },
          ];
        } else if (Number(this.curUser.userRole) === 2) {
          option = [
            {
              text: "Delete",
              style: {
                backgroundColor: "#FE6600",
              },
            },
          ];
        }
      }
      return option;
    },
    //邀请成员加入群聊
    inviteGroup() {
      this.SET_SELECT_FRIEND_OPTION({
        // 用户列表
        UserList: this.friendsList,
        // 默认选中用户id列表，即不可取消的用户id
        defaultIdList: this.groupList,
        type: 2,
        tipText: this.$t("contacts.Create-Group-tips"),
        title: this.$t("contacts.invite"),
      });
      uni.navigateTo({
        url: `/pages/selectFriend/selectFriend?groupId=${this.groupId}`,
      });
    },
    rightClick() {
      console.log("rightClick");
    },
    //群禁言
    toggleTaboo(type) {
      this.gagLoading = true;
      uni.showLoading();
      if (type == "Unblock") {
        groupGagBack({ groupId: this.groupId })
          .then((res) => {
            this.gagLoading = false;
            if (res.success) {
              this.groupInfo.groupStatus = !this.groupInfo.groupStatus;
              console.log(this.groupInfo, "this.groupInfo.groupStatus");
              uni.hideLoading();
              uni.showToast({
                title: this.$t("index.operation-success"),
                icon: "none",
                duration: 1500,
              });
            }
          })
          .catch((err) => {
            this.gagLoading = false;
            uni.hideLoading();
          });
      } else {
        groupGag({ groupId: this.groupId })
          .then((res) => {
            this.gagLoading = false;
            if (res.success) {
              this.groupInfo.groupStatus = !this.groupInfo.groupStatus;
              uni.hideLoading();
              uni.showToast({
                title: this.$t("index.operation-success"),
                icon: "none",
                duration: 1500,
              });
              // uni.navigateTo({
              //   url: "/pages/friends/GroupChatList",
              // });
            }
          })
          .catch((err) => {
            this.gagLoading = false;
            uni.hideLoading();
          });
      }
    },
    //确认弹窗
    confirm() {
      console.log("");
      if (this.confirmType == "dismissGroup") {
        dismissGroup({ groupId: this.groupId }).then((res) => {
          if (res.success) {
            this.goHome();
          }
        });
      }
    },
    //回首页
    goHome() {
      // uni.switchTab({
      // 	url: '/pages/home/home'
      // });
      var { chatList } = this.$store.state;
      chatList = chatList.filter((o) => o.targetId != this.groupId);
      this.$store.dispatch("changeChatList", chatList);
      uni.switchTab({
        url: "/pages/chat/Chat",
      });
    },
    //退出群组
    leaveGroup(userId) {
      let id = userId || this.$store.state.userInfo.userId;
      var user = this.groupList.find((o) => o.userId == id);
      //群主解散群聊
      if (user.userRole == 1) {
        //解散
        this.confirmType = "dismissGroup";
        this.confirmShow = true;
      } else
        quitGroup({
          userIds: [id],
          groupId: this.groupId,
        }).then(async (res) => {
          if (res.success && userId) {
            await getGroupMemberList(this.groupId);
            this.handleGroupInfo();
          } else if (res.success) {
            this.goHome();
          }
        });
    },
    //获取群组
    async handleGroupInfo() {
      const groupInfo = await getGroupMemberList(this.groupId);
			console.log(groupInfo,'groupInfogroupInfogroupInfogroupInfo');
			if (groupInfo && groupInfo.length > 0) {
			        const map = new Map()
			        this.groupList = groupInfo.filter(v => !map.has(v.userId) && map.set(v.userId, 1))
			      } else {
			       this.groupList =  []
			      }
    },
    //跳转修改备注页
    handleDetail() {
      if (this.isGroupChat && Number(this.curUser.userRole) === 1) {
        uni.navigateTo({
          url: `/pages/friends/GroupMsgSetting?groupName=${this.groupInfo.groupName}&avatar=${this.groupInfo.avatar || ''}&avatarCompress=${this.groupInfo.avatarCompress || ''}&groupId=${this.groupId}`
        })
      } else {
        uni.navigateTo({
          url: `/pages/friends/ModifyRemarks?friendId=${
            this.friendId !== 'undefined' ?this.friendId : (this.friendInfo && this.friendInfo.userId)
          }&userId=${this.userId}&commentName=${
            this.friendInfo.commentName || ""
          }&commentLast=${this.friendInfo.commentLast || ""}&avatar=${this.friendInfo.avatar || friendInfo.avatarCompress || this.$store.state.normalPic}&defaultName=${(this.formatUserName(this.friendInfo) || this.commentName).slice(0, 1)}&defaultColor=${getDefaultColor(this.friendInfo.avatarColorCode)}`,
        });
      }
    },
    // 点击完成添加好友
    async handleAddContactDone() {
      const resp = await queryAddFriend({
        friendId: this.friendInfo.userId,
        commentName: this.addFriendInfo.firstName,
        commentLast: this.addFriendInfo.lastName,
      });
      if (!resp.success) return;
      // let chatList = this.$store.state.chatList.find(
      //   (o) => o.targetId == this.friendInfo.userId
      // );
      // if (chatList) {
      //   chatList.info.commentLast = this.addFriendInfo.firstName;
      //   chatList.info.commentName = this.addFriendInfo.lastName;
      // }
      // this.friendInfo.commentName = this.addFriendInfo.firstName;
      // this.friendInfo.commentLast = this.addFriendInfo.lastName;
      this.closeAddContacts()
      this.getFriendsList()
      updateOlUsersName({
        friendId: this.friendInfo.userId,
        commentName: this.addFriendInfo.firstName,
        commentLast: this.addFriendInfo.lastName,
			})
      uni.navigateTo({
        url: `/pages/chat/PersonalChat?backType=1&targetId=${this.friendInfo.userId}`,
      });
    },
    // 打开添加联系人弹出层
    handleAddFriend() {
      this.addFriendInfo = { ...this.friendInfo }
      this.showContacts = true
    },
    // 获取用户信息
    async getFriendInfo() {
      // this.friendInfo = await getUserInfo(this.userId); // 走缓存
      uni.showLoading({
        title: this.$t("contacts.loading"),
      });
      this.friendInfo = await getTargetUserInfo(this.userId) // 走网络
			this.getBlackList()
			updateOlUsersInfo(this.friendInfo)
      uni.hideLoading();
    },
  },
  onShow() {
    this.isFirstLoad = true
    this.moreShow = false;
    if (this.conversationType == 6) {
			this.messageStatus();
      return
    }
    if (this.isGroupChat) this.handleGroupInfo();
    else this.getFriendInfo();
    this.$nextTick(() => {
      this.messageStatus();
    });
  },
  onLoad(option) {
    if (option.targetId) this.userId = option.targetId;
    if (option.friendId) this.friendId = option.friendId;
    console.log(this.friendId)
    if (option.commentName) this.commentName = option.commentName;
    if (option.groupId) this.groupId = option.groupId;
    if (option.conversationType)
      this.conversationType = option.conversationType;
    this.isGroupChat = option.isGroupChat || 0;
    const sysInfo = uni.getSystemInfoSync();
    this.top = sysInfo.safeArea.top + "px";
    this.getPrePages() // 获取上一个页面的路径已经参数
  },
};
</script>
<style></style>
<style lang="scss" scoped>
.wrapper {
  // 设置不可见
  .invisible {
    color: red !important;
  }
  // 超出内容省略号代替
  .exceedToEllipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  width: 100vw;
  height: 100%;

  box-sizing: border-box;
  padding: 60px 30upx;

  // 添加联系人弹出层
  .AddContacts-warpper {
    height: 800rpx;
    &__header {
      display: flex;
      align-items: center;
      height: 110rpx;
      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      &__left {
        flex: 0 0 200rpx;
        padding-left: 30rpx;
        color: #878787;
      }

      &__title {
        flex: 1;
        text-align: center;
        font-size: 34rpx;
        font-weight: 500;
        color: #000000;
      }

      &__right {
        flex: 0 0 200rpx;
        text-align: right;
        padding-right: 30rpx;
        color: #61bdb2;
      }
    }
    &__container {
      padding: 0 31rpx 0 29rpx;
      .user-card-info {
        display: flex;
        height: 200rpx;
        background: #ffffff;
        border-radius: 20px;
        padding: 32rpx 30rpx;
        box-sizing: border-box;
        margin-bottom: 30rpx;
        // 头像
        .user-card-info-photo,
        .avatar-box {
          width: 136rpx;
          height: 136rpx;
          border-radius: 50%;
          margin-right: 51rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .avatar-box {
          line-height: 136rpx;
        }
        // 右侧名称
        .info-right {
          flex: 1;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          .info-right-name {
            flex: 1;
            box-sizing: border-box;
            border-bottom: 4rpx solid #f6f6f6;
            font-size: 28rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #000000;
          }
          .info-right-lastName {
            flex: 1;
            box-sizing: border-box;
            font-size: 28rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #000000;
          }
        }
      }

      // 手机号
      .phone-line {
        margin-top: 30upx;
        width: 100%;
        height: 128upx;
        background: #ffffff;
        border-radius: 20upx;
        box-sizing: border-box;
        padding: 20upx;
        .line-text {
          font-size: 28upx;
          font-weight: 400;
          color: #878787;
          line-height: 40upx;
        }
        .line-content {
          font-size: 32upx;
          font-weight: 400;
          color: #61bdb2;
          line-height: 48upx;
        }
      }
    }
  }
  .AddContacts-warpper-popup {
    /deep/ .u-popup__content {
      background: #f6f6f6;
      border-radius: 40rpx 40rpx 0px 0px;
    }
  }

  .u-right-slot {
    .edit-btn {
      font-size: 28upx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.9);
      line-height: 40upx;
    }
  }
  .avatar-box {
    width: 160upx;
    height: 160upx;
    background: linear-gradient(180deg, #85dad0 0%, #6cbdb3 100%, #6cbdb3 100%);
    border-radius: 50%;
    font-size: 64upx;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    line-height: 160upx;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nickname {
    // height: 58rpx;
    margin-top: 20upx;
    font-size: 36upx;
    font-weight: 600;
    color: #000000;
    line-height: 52upx;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis; // 当对象内文本溢出时显示省略标记
    display: -webkit-box;
    -webkit-line-clamp: 2; // 这边的2指的是两行
    -webkit-box-orient: vertical;
  }
  .group-member {
    font-size: 14px;
    font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
    font-weight: 400;
    color: #878787;
    line-height: 20px;

    text-align: center;
  }
  .online-time {
    font-size: 28upx;
    position: relative;
    text-align: center;
    height: 40upx;
    font-weight: 400;
    color: #1bc922;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .online-status {
    font-size: 28upx;
    position: relative;
    text-align: center;
    height: 40upx;
    font-weight: 400;
    color: #1bc922;
    display: flex;
    align-items: center;
    justify-content: center;
    &::before {
      content: "";
      width: 8upx;
      height: 8upx;
      background: #1bc922;
      border-radius: 50%;
      top: 50%;
      margin-left: -12upx;
      margin-right: 4upx;
    }
  }
  .box-group {
    margin-top: 50upx;
    display: flex;
    justify-content: space-between;
    .box-item {
      // width: 210upx;
      width: calc((100% - 30rpx * 1) / 2);
      height: 136upx;
      background: #ffffff;
      border-radius: 20upx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      .normal {
        // transform: translate(-64rpx, 184rpx) !important;
      }
      .more-popup {
        width: 340rpx;
        background: #ffffff;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
        opacity: 1;
        // transform: translate(-64rpx, 222rpx);
        position: absolute;
        border-radius: 8rpx;
        z-index: 100;
        transition: all 0.3s;
        left: -64upx;
        top: 136upx;
        .more-menu {
          height: 80rpx;
          display: flex;
          align-items: center;
          font-size: 28rpx;
          font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
          font-weight: 400;
          color: #000000;
          line-height: 40rpx;
          margin: 0 30rpx;
          border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
          .icon {
            margin-right: 24rpx;
          }
        }
      }
      .box-icon {
        font-size: 56upx;
        color: #61bdb2;
      }
      .box-text {
        font-size: 28upx;
        font-weight: 400;
        color: #61bdb2;
        line-height: 40upx;
      }
    }
  }
  .cell-line {
    margin-top: 30upx;
    width: 100%;
    height: 128upx;
    background: #ffffff;
    border-radius: 20upx;
    box-sizing: border-box;
    padding: 20upx;
    .line-text {
      font-size: 28upx;
      font-weight: 400;
      color: #878787;
      line-height: 40upx;
    }
    .line-content {
      font-size: 32upx;
      font-weight: 400;
      color: #61bdb2;
      line-height: 48upx;
    }
  }
  .column {
    display: flex;
    flex-direction: column;
    align-items: unset !important;
    justify-content: unset !important;
  }
  .box-line {
    margin-top: 30upx;
    width: 100%;
    background: #ffffff;
    border-radius: 20upx;
    box-sizing: border-box;
    padding: 0 20upx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .right {
      justify-content: flex-end;
    }
    .line-one {
      height: 108upx;
      font-size: 32upx;
      font-weight: 400;
      color: #61bdb2;
      line-height: 108upx;
      border-bottom: 2upx solid rgba(0, 0, 0, 0.05);
    }
    .line-two {
      height: 108upx;
      font-size: 32upx;
      font-weight: 400;
      color: #fe6600;
      line-height: 108upx;
    }
    .line-icon {
      font-size: 48upx;
      color: #61bdb2;
    }
    .line-three {
      margin-left: 14upx;
      height: 108upx;
      font-size: 32upx;
      font-weight: 400;
      color: #61bdb2;
      line-height: 108upx;
    }
  }
  .members-box {
    margin-top: 30upx;
    width: 100%;
    background: #ffffff;
    border-radius: 20upx;
    box-sizing: border-box;
    padding: 20upx 0upx 0upx;
    overflow: hidden;
    .title {
      width: calc(100% - 40upx);
      margin: 0upx 20upx;
      font-size: 32upx;
      font-weight: 500;
      color: #61bdb2;
      line-height: 48upx;
      padding-bottom: 20upx;
      border-bottom: 2upx solid rgba(0, 0, 0, 0.05);
    }
    .user-line {
      width: calc(100% - 40upx);
      margin: 0upx 20upx;
      height: 148upx;
      border-top: 2upx solid rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
      .avatar {
        width: 88upx;
        height: 88upx;
        border-radius: 50%;
      }
      .user-type {
        font-size: 14rpx;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #878787;
        line-height: 20px;
        width: 130rpx;
        text-align: right;
      }
      .user-info {
        margin: 0 10upx;

        .user-name {
          font-size: 32upx;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.8);
          line-height: 48upx;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          width: 400rpx;
        }
        .user-offline-status {
          display: flex;
          align-items: center;
          font-size: 28upx;
          font-weight: 400;
          color: #878787;
          line-height: 40upx;
          .dot {
            width: 8upx;
            height: 8upx;
            background: #1bc922;
            border-radius: 50%;
            margin-right: 10upx;
          }
        }
        .user-online-status {
          display: flex;
          align-items: center;
          font-size: 28upx;
          font-weight: 400;
          color: #1bc922;
          line-height: 40upx;
          .dot {
            width: 8upx;
            height: 8upx;
            background: #1bc922;
            border-radius: 50%;
            margin-right: 10upx;
          }
        }
      }
    }
  }
}
</style>
